<!DOCTYPE html>
<html>

    <head>

        <title>SWED life's Disc Golf</title>

        <!-- <script type='text/javascript'>GodTier.applicationName = '{{=request.application}}';</script> -->

        <script src="{{=URL('static','js/jquery.js')}}"></script>
        <script src="{{=URL('static','js/jqueryUI.js')}}"></script>
        
        <script src="{{=URL('static','js/three.min.js')}}"></script>
        <script src="{{=URL('static','js/detector.js')}}"></script>
        <script src="{{=URL('static','js/stats.js')}}"></script>
        <script src="{{=URL('static','js/OrbitControls.js')}}"></script>
        <script src="{{=URL('static','js/keyboardState.js')}}"></script>
        <script src="{{=URL('static','js/fullscreen.js')}}"></script>
        <script src="{{=URL('static','js/windowResize.js')}}"></script>
        <script src="{{=URL('static','js/UVsUtils.js')}}"></script>
        <script src="{{=URL('static','js/extrudeLeg.js')}}"></script>
        <script src="{{=URL('static','js/CurveExtras.js')}}"></script>
        <script src="{{=URL('static','js/pipeSpline.js')}}"></script>
        <script src="{{=URL('static','js/playerModel.js')}}"></script>
        <script src="{{=URL('static','js/ColladaLoader.js')}}"></script>

    </head>

    <body>

        <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

        <script>
    
            /*
                Three.js "tutorials by example"
                Author: Lee Stemkoski
                Date: July 2013 (three.js v59dev)
            */

            // MAIN

            // standard global variables
            var container, scene, camera, renderer, controls, stats;
            var keyboard = new THREEx.KeyboardState();
            var clock = new THREE.Clock();
            var t = 0;
            // custom global variables
            var cube;

            var body = $( 'body' );
            var fun = function( texture ) { loadedCount++; body.trigger( 'textureLoaded' ); }

            var loadedCount = 0;

            var floorTexture = new THREE.ImageUtils.loadTexture( '/discgolf/static/images/klontz.jpg', { }, fun );
            //var mkpTexture =  new THREE.ImageUtils.loadTexture( '/discgolf/static/images/mkp.png', { }, fun );

            var loader = new THREE.ColladaLoader();
            var dae;
            var skin;
            loader.options.convertUpAxis = true;
                      
            //loader.load( '/discgolf/static/models/monster/monster.dae', function ( collada ) {
            //loader.load( '/discgolf/static/models/BelmontDreamCourse.dae', function ( collada ) {
            //loader.load( '/discgolf/static/models/TreeBasketWoman.dae', function ( collada ) {
            //loader.load( '/discgolf/static/models/WomanBasketSimple.dae', function ( collada ) {
            loader.load( '/discgolf/static/models/WomanBasketSimple_v2.dae', function ( collada ) {
                         
                dae = collada.scene;
                skin = collada.skins[0];

                //dae.scale.x = dae.scale.y = dae.scale.z = .1;
                dae.scale.x = dae.scale.y = dae.scale.z = 2;
                dae.updateMatrix();

                dae.position.set( 5, 5, 5 ); 

                loadedCount++;

                body.trigger('textureLoaded');
                
            } );
           
            body.on( 'textureLoaded', function() { if( loadedCount == 2 ) { init(); animate(); } } );

            //init();
            //animate();

            // FUNCTIONS        
            function init()  {

                // SCENE
                scene = new THREE.Scene();
                // CAMERA
                var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;

                var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
                camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
                scene.add(camera);
                camera.position.set(0,150,400);
                camera.lookAt(scene.position);  
                // RENDERER
                if ( Detector.webgl )
                    renderer = new THREE.WebGLRenderer( {antialias:true} );
                else
                    renderer = new THREE.CanvasRenderer(); 
                renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
                container = document.getElementById( 'ThreeJS' );
                container.appendChild( renderer.domElement );
                // EVENTS
                THREEx.WindowResize(renderer, camera);
                THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });

                // CONTROLS
                // MUST REMOVE THIS LINE!!!
                // controls = ...

                // STATS
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.bottom = '0px';
                stats.domElement.style.zIndex = 100;
                container.appendChild( stats.domElement );

                // LIGHT
                //var light = new THREE.PointLight( 0xffffff, 5, 50 );
                //light.position.set( 0, 250, 0 );

                //var light = new THREE.PointLight( 0xff0040, 5, 50 );
                //light.position.set( -5, 5, -5 );
                //scene.add(light);
                //mylight = light;

                // FLOOR
                //var floorTexture = new THREE.ImageUtils.loadTexture( '/discgolf/static/images/klontz.jpg', function() { $('body').trigger( 'loadedKlontz' ); } );

                floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
                floorTexture.repeat.set( 1, 1 );
                var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
                var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
                var floor = new THREE.Mesh(floorGeometry, floorMaterial);
                floor.position.y = -0.5;
                floor.rotation.x = Math.PI / 2;
                scene.add(floor);
                // SKYBOX/FOG
                var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
                var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
                var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
                // scene.add(skyBox);
                scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
                
                ////////////
                // CUSTOM //
                ////////////
               

                // create an array with six textures for a cool cube
                /*
                var materialArray = [];
                materialArray.push(new THREE.MeshBasicMaterial( { map: mkpTexture } ) );
                materialArray.push(new THREE.MeshBasicMaterial( { map: mkpTexture } ) );
                materialArray.push(new THREE.MeshBasicMaterial( { map: mkpTexture } ) );
                materialArray.push(new THREE.MeshBasicMaterial( { map: mkpTexture } ) );
                materialArray.push(new THREE.MeshBasicMaterial( { map: mkpTexture } ) );
                materialArray.push(new THREE.MeshBasicMaterial( { map: mkpTexture } ) );
                var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
                var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
                MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
                MovingCube.position.set(0, 25.1, 0);
                scene.add( MovingCube );    
                */

                playerInfo = makePlayerModel();

                //playerInfo.headmesh.add( camera );

                scene.add( playerInfo.playerGroup );
                    
                scene.add( dae );
                
                dae.position.set( 5, 5, 5 ); 

                particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );

                scene.add( particleLight );

                scene.add( new THREE.AmbientLight( 0xcccccc ) );

                var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
                directionalLight.position.x = Math.random() - 0.5;
                directionalLight.position.y = Math.random() - 0.5;
                directionalLight.position.z = Math.random() - 0.5;
                directionalLight.position.normalize();
                
                scene.add( directionalLight );

                pointLight = new THREE.PointLight( 0xffffff, 4 );
                pointLight.position = particleLight.position;
                scene.add( pointLight );

                pressed = "";

            }

            function animate() {
                
                var delta = clock.getDelta(); // seconds.

                requestAnimationFrame( animate );

                if( t > 1 ) { t = 0; }

                if( skin ) {

                   for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {

                       skin.morphTargetInfluences[ i ] = 0;

                   }

                   skin.morphTargetInfluences[ Math.floor( t * 30 ) ] = 1;

                   t += delta;
                }

                render();       
                //update();
            }

            function update()
            {
                var delta = clock.getDelta(); // seconds.
                var moveDistance = 200 * delta; // 200 pixels per second
                var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
                pressed = "";
                
                // local transformations

                // move forwards/backwards/left/right
                if ( keyboard.pressed("W") ) {
                    playerInfo.playerGroup.translateX( -moveDistance );

                    pressed = "w";
                }

                if ( keyboard.pressed("S") ) {
                    playerInfo.playerGroup.translateX(  moveDistance );
                    pressed = "w";
                }

                if ( keyboard.pressed("Q") ) {
                    playerInfo.playerGroup.translateZ( -moveDistance );
                    pressed = "w";
                }

                if ( keyboard.pressed("E") ) {
                    playerInfo.playerGroup.translateZ(  moveDistance ); 
                    pressed = "w";
                }

                // rotate left/right/up/down
                var rotation_matrix = new THREE.Matrix4().identity();
                if ( keyboard.pressed("A") )
                    playerInfo.playerGroup.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
                if ( keyboard.pressed("D") )
                    playerInfo.playerGroup.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
                if ( keyboard.pressed("R") )
                    playerInfo.playerGroup.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
                if ( keyboard.pressed("F") )
                    playerInfo.playerGroup.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);
                
                if ( keyboard.pressed("Z") )
                {
                    playerInfo.playerGroup.position.set(0,25.1,0);
                    playerInfo.playerGroup.rotation.set(0,0,0);
                }
                
                var relativeCameraOffset = new THREE.Vector3(0,50,200);

                var cameraOffset = relativeCameraOffset.applyMatrix4( playerInfo.playerGroup.matrixWorld );

                /*
                camera.position.x = cameraOffset.x;
                camera.position.y = cameraOffset.y;
                camera.position.z = cameraOffset.z;
                camera.lookAt( playerInfo.playerGroup.position );
                */
 
                //camera.updateMatrix();
                //camera.updateProjectionMatrix();
                        
                stats.update();
            }

            function render() 
            {
    
                var now = Date.now();
                var time = (now - clock.startTime)/1000;
                var timer = now * 0.0005;

                //headgroup.rotation.y = Math.sin(time*1.5)/3;
                //headgroup.rotation.z = Math.sin(time)/2;

                if( pressed == "w" ) {
                    playerInfo.arms.rightarm.rotation.z = 2 * Math.cos(0.6662 * time*10 + Math.PI);
                    playerInfo.arms.rightarm.rotation.x = 1 * (Math.cos(0.2812 * time*10) - 1);

                    playerInfo.arms.leftarm.rotation.z = 2 * Math.cos(0.6662 * time*10);
                    playerInfo.arms.leftarm.rotation.x = 1 * (Math.cos(0.2312 * time*10) + 1);
                
                    playerInfo.legs.rightleg.rotation.z = 1.4 * Math.cos(0.6662 * time*3);
                    
                    //playerInfo.legs.leftleg.rotation.y = 1.4 * Math.cos(0.6662 * time*10 + Math.PI);

                    //rotate z for cube and cylinder, y for extrude
                    playerInfo.legs.leftleg.rotation.z = 1.4 * Math.cos(0.6662 * time*3 + Math.PI);
                }

                /* 
                playerInfo.playerGroup.position.y = 1.7 * Math.cos(0.6662 * time*10 * 2); // Jumping
                playerInfo.playerGroup.position.z = 1 * Math.cos(0.6662 * time*10); // Dodging when running
                playerInfo.playerGroup.rotation.x = 0.01 * Math.cos(0.6662 * time*10 + Math.PI); // Slightly tilting when running
                
                var pos = time*0.9;
                
                playerInfo.playerGroup.rotation.y = -(pos);
                playerInfo.playerGroup.position.x = 90*Math.cos(pos-Math.PI/2);
                playerInfo.playerGroup.position.z = 90*Math.sin(pos-Math.PI/2);
                */

                particleLight.position.x = Math.sin( timer * 4 ) * 3009;
                particleLight.position.y = Math.cos( timer * 5 ) * 4000;
                particleLight.position.z = Math.cos( timer * 4 ) * 3009;
                
                renderer.render( scene, camera );
            }

</script>

    </body>

</html>
